<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue'

const info = ref('123')

// dom 元素加载完毕之后指向,在这里可以发请求,获取 dom 元素,操纵 dom 元素
onMounted(() => {
  console.log('onMounted')
})
onBeforeMount(() => {
  console.log('onBeforeMount')
})

// 数据改变之前
onUpdated(() => {
  console.log('onUpdated')
})
// 数据改变完毕
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
</script>

<template>
  <h2 @click="info += '!'">生命周期函数:{{ info }}</h2>
</template>

<style></style>
